<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>模仿京东快递查询</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			.box {
				position: relative;
				width: 400px;
				height: 100px;
				padding-top: 50px;
				padding-left: 5px;
				margin: 20px auto;
				background-color: #ccc;
			}
			.box input {
				
				float: left;
				width: 300px;
				height: 30px;
				padding-left: 5px;
				outline: none;
				border: 0;
			}
			.box button {
				float: left;
				width: 95px;
				height: 30px;
				color: #fff;
				border: 0;
				outline: none;
				background-color: #e1251b;
				cursor: pointer;
			}
			
			.con {
				display: none;
				position: absolute;
				top: 2px;
				left: 5px;
				width: 300px;
				height: 35px;
				line-height: 35px;
				padding-left: 5px;
				background: pink;
				box-shadow: 1px 1px 10px 1px rgba(0,0,0,.3);
			
			}
			.con::before {
				position: absolute;
				left: 20px;
				bottom: -8px;
				content: '';
				width: 0;
				height: 0;
				border-top: 8px solid pink;
				border-left: 8px solid transparent;
				border-right: 8px solid transparent;
				
			}
		</style>
	</head>
	<body>
		
		<div class="box">
			<div class="con"></div>
			<input class="ipt" type="text" name="" id="" value="" placeholder="请输入单号"/>
			<button>确定</button>
		</div>
		
		
		<script type="text/javascript">
			//获取con 和 input 
			var con = document.querySelector('.con');
			var ipts = document.querySelector('.ipt');
			
			//给 input 绑定事件
			ipts.addEventListener('keyup',function() {
				if(this.value == '') {
					con.style.display = 'none';
				} else {
					//获取到input输入的内容
					var cont = this.value;
					con.innerHTML = cont;
					con.style.display = 'block'
				}
			})
			
			//当鼠标离开输入框的时候,con框消失
			ipts.addEventListener('blur',function() {
				con.style.display = 'none'
			})
			
			//当鼠标聚焦在输入框的时候,如果输入框的内容不为空,显示con内容框
			ipts.addEventListener('focus',function() {
				if(this.value != '') {
					con.style.display = 'block'
				}
			})
		</script>
	</body>
</html>
